<template>
  <div class="viewContain">
    <el-form :model="listQuery" size="small" label-width="100px">
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="账号名称 :">
            <el-input
              v-model="listQuery.accountName"
              placeholder="请输入内容"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 9 }" :xl="{ span: 9 }">
          <el-form-item label="起止时间 :">
            <el-date-picker
              v-model="listQuery.time"
              :clearable="eee"
              size="small"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              unlink-panels
              @change="dateChange"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label-width="20px">
            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
            <el-button size="mini" type="primary" plain @click="handleReload">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align:right;margin-bottom:10px">
      总销售额(元) : {{ saleMoney }} &nbsp;&nbsp; 总提成金额 (元) : {{ saleProfile }}
    </div>
    <el-table
      ref="table"
      v-loading="loading"
      fit
      stripe
      :data="tableData"
      border
      size="mini"
    >
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="accountName" align="center" label="账号名" />
      <el-table-column prop="accountId" align="center" label="账号id" />
      <el-table-column prop="salesSum" align="center" label="销售额(元)" />
      <el-table-column prop="quotaNum" align="center" label="提成额度(%)" />
      <el-table-column prop="time" align="center" label="额度时间" />
      <el-table-column prop="commission" align="center" label="提成金额(元)" />
    </el-table>
  </div>
</template>

<script>
import { commonMixin } from '@v/mixin/commonMixin.js'
import ComApiUrl from '@a/comomApi.js'
export default {
  mixins: [commonMixin],
  data() {
    return {
      comApiUrlList: new ComApiUrl('/order/api/commission/queryCommission'),
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        accountId: '',
        beginTime: '',
        endTime: '',
        time: '',
        accountName: ''
      },
      userInfo: {},
      saleMoney: '', // 总销售额
      saleProfile: '', // 总提成金额
      eee: false
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.listQuery.accountId = this.userInfo.userId
    // this.listQuery.userName = this.userInfo.userName
    this.getList()
    // console.log(this.tableData)
  },
  methods: {
    // 重置
    handleReload() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        accountId: this.userInfo.userId,
        // accountName: this.userInfo.userName,
        beginTime: '',
        endTime: ''
      }
      this.getList()
    },
    dateChange(time) {
      // console.log(time)
      this.listQuery.beginTime = time[0]
      this.listQuery.endTime = time[1]
      // delete this.listQuery.time
      console.log(this.listQuery)
    },
    test(val) {
      console.log(val)
    }
  }
}
</script>
